<template>
  <!--  最开始的页面 -->
  <div
    id="liveDetailsRoot"
    v-if="finishLeft"
    ref="capture"
    v-title
    :data-title="infoList.roomTitle + '-直播数据|商品|观众数据分析-掌上精选'"
  >
    <div class="leftBox">
      <section v-if="finishLeft">
        <!-- 1 -->
        <div class="Box01" v-if="infoList != null">
          <div class="headerBox01">
            <div class="headerLrft01">
              <img src="@/assets/wang/live/live.png" />
              <span>直播信息</span>
            </div>
            <img
              src="@/assets/wang/live/share.png"
              class="shareImg"
              @click="generatorImage"
            />
          </div>
          <div class="boxItem01">
            <div class="imgBox01">
              <img :src="infoList.roomLogo" />
              <div class="livingBox" v-if="infoList.status == 1">
                <p class="livingGif">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                </p>
                <span>直播中</span>
              </div>
            </div>
            <div class="rightItem01">
              <div class="infoTitle">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="infoList.roomTitle"
                  placement="top"
                >
                  <p>
                    {{ infoList.roomTitle }}
                  </p>
                </el-tooltip>
                <img
                  src="@/assets/meng/pop01.png"
                  v-if="infoList.isShop == 1"
                  class="shopImg"
                />
                <img
                  src="@/assets/meng/pop02.png"
                  v-if="infoList.isRed == 1"
                  class="redImg"
                />
              </div>
              <p class="timeP">
                直播时长:<span>{{
                  format_time((infoList.endUnix - infoList.startUnix) * 1000)
                }}</span>
              </p>
              <p class="timeP">
                开播时间:<span>{{
                  timestamp(infoList.startUnix, "Y-M-D h:m:s")
                }}</span>
              </p>
              <p class="timeP" v-if="infoList.status != 1">
                结束时间:<span>{{
                  timestamp(infoList.endUnix, "Y-M-D h:m:s")
                }}</span>
              </p>
              <p class="timeP" v-if="infoList.status == 1">
                结束时间:<span>--</span>
              </p>

              <div @click="toLive(infoList.roomId)">
                <span>查看数据大屏</span>
                <img src="@/assets/wang/live/moreLive.png" />
              </div>
            </div>
          </div>
        </div>
        <!-- 达人信息 -->
        <div class="Box02" v-if="talentInfo != null">
          <div class="headerBox01">
            <div class="headerLrft01">
              <img src="@/assets/wang/live/drInfo.png" class="liveIcon" />
              <span>达人信息</span>
            </div>
          </div>
          <div class="infoTop">
            <div class="infoTopLeft">
              <div class="avatorBox playing">
                <img
                  :src="talentInfo.logo"
                  class="avatorImg"
                  @click="goTalentDetails(talentInfo.authorId)"
                />
                <div class="playingIcon" v-if="talentInfo.liveStatu == 1">
                  <p class="livingGif">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </p>
                  <span class="playingText">直播中</span>
                </div>
              </div>
            </div>
            <div class="infoTopRight">
              <div class="nameBox">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="talentInfo.nickName"
                  placement="top"
                >
                  <p @click="goTalentDetails(talentInfo.authorId)">
                    {{ talentInfo.nickName }}
                  </p>
                </el-tooltip>
                <!-- 企业认证为蓝色2 个人认证为黄色1 -->
                <img
                  src="../../../../assets/wang/talentCompare/rzBlue.png"
                  v-if="talentInfo.verifyType == 2"
                />
                <img
                  src="../../../../assets/wang/talentCompare/rzOrange.png"
                  v-if="talentInfo.verifyType == 1"
                />
                <img
                  src="../../../../assets/wang/talentCompare/shop.png"
                  v-if="talentInfo.isShop == 1"
                />
                <!-- <img src="../../../../assets/wang/tdetails/talent.png" alt="" /> -->
              </div>
              <div class="dyNumber">
                <span>抖音号: </span>
                <span>{{ talentInfo.uniqueId }}</span>
              </div>
              <div class="dyNumber">
                <span>粉丝数: </span>
                <span>{{ format_num(totalFans) }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 人气数值 -->
        <div class="Box03" v-if="dataInfo != null">
          <section>
            <div class="headerBox01">
              <div class="headerLrft01">
                <img src="@/assets/wang/live/hot.png" class="hotIcon" />
                <span>人气数据</span>
              </div>
            </div>
            <div class="dataBox">
              <div class="dataItem">
                <p>{{ format_num(dataInfo.lookPeople) }}</p>
                <p>累计观看人次</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.lookPeak) }}</p>
                <p>观看人数峰值</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.avglooktime) }}</p>
                <p>人均看播时长</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.avgonlinePeople) }}</p>
                <p>平均在线人数</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.livefanCount) }}</p>
                <p>单场涨粉</p>
              </div>
              <div class="dataItem">
                <p>{{ dataInfo.livefanRate }}%</p>
                <p>转粉率</p>
              </div>
              <!-- <div class="dataItem">
                <p>{{ format_num(dataInfo.sound) }}</p>
                <p>获得音浪</p>
              </div> -->
              <div class="dataItem">
                <p>{{ format_num(dataInfo.favorite) }}</p>
                <p>点赞数</p>
              </div>
            </div>
          </section>
          <!-- 带货数据 -->
          <section v-if="infoList.isShop == 1">
            <div class="headerBox01">
              <div class="headerLrft01">
                <img src="@/assets/meng/video03_01.png" class="addGoods" />
                <span>带货数据</span>
              </div>
            </div>
            <div class="dataBox">
              <div class="dataItem">
                <p>{{ format_num(dataInfo.livevolume) }}</p>
                <p>直播销量</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.livesale) }}</p>
                <p>销售额</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.livepro) }}</p>
                <p>直播商品</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.avgprice) }}</p>
                <p>客单价</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.livemaxprice) }}</p>
                <p>最高单价</p>
              </div>
              <div class="dataItem">
                <p>{{ format_num(dataInfo.avglook) }}</p>
                <p>UV价值</p>
              </div>
            </div>
          </section>
          <div class="refreshBox">
            <span>数据更新时间</span>
            <!-- <span>{{ timestamp(infoData.timeSpan, "Y-M-D h:m:s") }}</span> -->
            <span>{{ timestamp(dataInfo.timeUnix, "Y-M-D h:m:s") }}</span>
            <!-- <img
            src="../../../../assets/wang/tdetails/refresh.png"
            @click="getInfoData"
          /> -->
            <img
              src="../../../../assets/wang/tdetails/refresh.png"
              @click="refresh"
            />
          </div>
          <!-- <div
            class="starBtn"
            v-if="dataInfo.isCollect == 0"
            @click="addStar(authorId, dataInfo)"
          >
            添加收藏
          </div>
          <div
            class="starBtn hasStar"
            v-if="dataInfo.isCollect == 1"
            @click="cancelStar(authorId, dataInfo)"
          >
            已收藏
          </div> -->
        </div>
      </section>
      <div
        v-loading="!finishLeft"
        v-if="!finishLeft"
        class="loading loading01"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <div class="rightBox">
      <el-tabs v-model="active_name" v-if="infoList != null">
        <el-tab-pane label="直播数据分析" name="0">
          <LiveData v-if="active_name == '0'" />
          <!-- <hot_analyse v-if="active_name == '0'" :id="id" /> -->
        </el-tab-pane>
        <el-tab-pane label="直播商品分析" name="1" v-if="infoList.isShop == 1">
          <LiveGoods v-if="active_name == '1'" />
        </el-tab-pane>
        <el-tab-pane label="直播观众分析" name="2">
          <Audience v-if="active_name == '2'" />
        </el-tab-pane>
        <!-- <el-tab-pane label="PK达人分析" name="3">
          <PKtalent v-if="active_name == '3'" />
        </el-tab-pane> -->
      </el-tabs>
      <!-- <div
        v-loading="!finishLeft"
        v-if="!finishLeft"
        class="loading loading01"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div> -->
    </div>
  </div>
</template>

<script>
import LiveData from "./liveData.vue";
import LiveGoods from "./liveGoods.vue";
import Audience from "./audience.vue";
import PKtalent from "./PKtalent.vue";
import html2canvas from "html2canvas";
export default {
  name: "",
  components: { LiveData, LiveGoods, Audience, PKtalent },
  data() {
    return {
      active_name: "",
      id: "",
      cancel: null,
      cancel01: null,
      cancel02: null,
      cancel03: null,
      cancel04: null,
      infoList: null,
      dataInfo: null,
      talentInfo: null,
      authorId: "",
      totalFans: "",
      finishLeft: false
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.params.index) {
      this.active_name = this.$route.params.index;
    }
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
    }
  },
  mounted() {
    this.getinfo();
    // this.getDataInfo();
  },

  methods: {
    // 收藏
    addStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/InsertCollection",
          {
            CollectId: id,
            Module: 1 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏
    cancelStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: id,
            Module: 1 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 刷新
    refresh() {
      this.getinfo();
      this.getDataInfo();
    },
    // 分享
    generatorImage() {
      var that = this;
      const loading = this.$loading({
        lock: true,
        text: "导出中...",
        spinner: "el-icon-loading",
        customClass: "customClass"
      });
      var shareContent;
      shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
      // console.log("shareContent", shareContent);
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true //日志开关
      };
      html2canvas(shareContent, opts).then(canvas => {
        let str;
        str = `《直播分析》.png`;
        canvas.toBlob(
          function(blob) {
            const eleLink = document.createElement("a");
            eleLink.download = str;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          "image/png",
          1
        );
        loading.close();
      });
    },
    // 获取直播间信息
    getinfo() {
      let that = this;
      that.finishLeft = false;
      that.infoList = null;
      that.$axios
        .get(
          "/api/live/info",
          {
            params: {
              roomId: that.$route.params.id
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          that.loading = false;
          if (res.data.code == 0) {
            that.infoList = res.data.data;
            that.authorId = res.data.data.authorId;
            this.getTalentInfo();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取达人信息
    getTalentInfo() {
      let that = this;
      that.$axios
        .get(
          "/api/author/GetAuthorDetailInfo",
          {
            params: {
              authorId: that.authorId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          that.loading = false;
          if (res.data.code == 0) {
            that.talentInfo = res.data.data;
            if (res.data.data != null) {
              that.totalFans = res.data.data.dataOverView.totalFans;
            }
            that.getDataInfo();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取数据
    getDataInfo() {
      let that = this;
      that.$axios
        .get(
          "/api/live/data",
          {
            params: {
              roomId: that.$route.params.id
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          that.loading = false;
          if (res.data.code == 0) {
            that.dataInfo = res.data.data;
            that.finishLeft = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 跳到直播大屏
    toLive(id) {
      let router = this.$router.resolve({
        path: `/live/${id}`
      });
      window.open(router.href, "_blank");
    },
    // 跳到达人详情
    goTalentDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, "_blank");
    }
  }
};
</script>
<style lang="less" scoped>
#liveDetailsRoot {
  min-width: 1600px;
  padding-top: 80px;
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  margin-top: -80px;
  background-color: #f1f1f1;
  overflow: hidden;
  .loading01 {
    margin-top: 300px;
  }
  .leftBox {
    padding: 0 20px 20px 20px;
    width: 340px;
    background-color: #fff;
    border-radius: 6px;
    overflow: auto;
    height: 100%;
    margin-top: 20px;
    .Box01 {
      border-bottom: 1px dashed #e5e5e5;
      .boxItem01 {
        margin-top: 25px;
        padding-bottom: 30px;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        .imgBox01 {
          margin-top: 7px;
          width: 80px;
          height: 116px;
          border-radius: 4px;
          position: relative;
          img {
            width: 80px;
            height: 116px;
            border-radius: 4px;
            border: 1px solid #e5e5e5;
          }
          .livingBox {
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 81px;
            height: 22px;
            background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
              linear-gradient(#ededed, #ededed);
            background-blend-mode: normal, normal;
            border-radius: 0 0 4px 4px;
            span {
              font-size: 12px;
              color: #ffffff;
              font-weight: 600;
            }
          }
        }
        .rightItem01 {
          margin-left: 25px;
          .infoTitle {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            p {
              font-size: 20px;
              color: #222222;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            img {
              width: 18px;
              height: 16px;
              margin-left: 6px;
            }
            .redImg {
              width: 13px;
            }
          }
          .timeP {
            font-size: 14px;
            color: #888888;
            padding-top: 8px;
            span {
              font-size: 14px;
              color: #222222;
              padding-left: 10px;
            }
          }
          div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-top: 8px;
            cursor: pointer;
            span {
              font-size: 14px;
              color: #1779ff;
            }
            img {
              width: 6px;
              height: 10px;
              margin-left: 11px;
            }
          }
        }
      }
    }
    .Box02 {
      padding-bottom: 25px;
      border-bottom: 1px dashed #e5e5e5;
      .infoTop {
        margin-top: 21px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .infoTopLeft {
          .playing {
            background-image: url(../../../../assets/wang/tdetails/avatorBg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .playingIcon {
              width: 64px;
              height: 22px;
              background-image: url(../../../../assets/wang/tdetails/playing.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: absolute;
              top: 55px;
              left: 28px;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;

              .playingText {
                font-size: 12px;
                color: #ffffff;
                // padding-left: 5px;
              }
            }
          }

          .avatorBox {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            position: relative;

            .avatorImg {
              cursor: pointer;
              width: 69px;
              height: 69px;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }

        .infoTopRight {
          flex: 1;
          margin-left: 25px;
          .nameBox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;

            p {
              max-width: 170px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 20px;
              color: #222222;
              margin-right: 9px;
              cursor: pointer;
            }
            img {
              margin-right: 9px;
            }
            img:nth-of-type(1) {
              width: 14px;
              height: 14px;
            }

            img:nth-of-type(2) {
              width: 18px;
              height: 18px;
            }

            img:nth-of-type(3) {
              width: 20px;
              height: 18px;
            }
          }

          .dyNumber {
            display: flex;
            justify-content: start;
            align-items: center;
            margin-top: 7px;

            span:nth-of-type(1) {
              color: #888888;
              font-size: 14px;
            }

            span:nth-of-type(2) {
              color: #222222;
              font-size: 14px;
              padding-left: 6px;
            }
          }
        }
      }
    }
    // box2
    .Box03 {
      .dataBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        .dataItem {
          width: 33.3%;
          text-align: center;
          margin-top: 28px;

          p:nth-of-type(1) {
            color: #222222;
            font-size: 18px;
            font-family: DINAlternate-Bold;
            // line-height: 100%;
          }

          p:nth-of-type(2) {
            color: #888888;
            font-size: 14px;
            padding-top: 4px;
          }
        }
      }
      .refreshBox {
        box-sizing: border-box;
        width: 300px;
        margin: 0 auto;
        height: 32px;
        line-height: 32px;
        background-color: #f5f5f5;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 13px;
        letter-spacing: 0;
        margin-top: 29px;

        span:nth-of-type(1) {
          font-size: 14px;
          color: #888888;
          letter-spacing: 0;
          line-height: 100%;
        }

        span:nth-of-type(2) {
          font-size: 16px;
          color: #222222;
          font-family: DINAlternate-Bold;
          letter-spacing: 0;
          line-height: 100%;
          padding-top: 1px;
        }

        img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }

      .starBtn {
        cursor: pointer;
        width: 150px;
        height: 48px;
        line-height: 48px;
        background-color: #1779ff;
        border-radius: 4px;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        margin: 30px auto;
      }

      .hasStar {
        background-color: #f5f5f5;
        border: solid 1px #e5e5e5;
        color: #888888;
      }
    }
  }
  .rightBox {
    margin-top: 20px;
    overflow: auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    height: 100%;
    flex: 1;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 6px;
  }
  //   title
  .headerBox01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 29px;
    .headerLrft01 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img {
        width: 17px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
        padding-left: 11px;
      }
    }
    .shareImg {
      width: 16px;
      cursor: pointer;
    }
    .liveIcon {
      width: 15px;
    }
    .hotIcon {
      width: 14px;
    }
    .addGoods {
      width: 15px;
    }
  }
  // 隐藏滚动条
  .leftBox::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
  // .rightBox::-webkit-scrollbar {
  //   display: none;
  //   /* Chrome Safari */
  // }
}
</style>
